<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7-dist/js/jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<style>
    .layout {
        width: 375px;
        height: 667px;
        margin: 50px auto;
        border: solid gray 0px;
    }
    .col-sm-6,.row{
        margin: auto;
    }
    .thumbnail {
        margin-bottom: 0px;
    }
</style>
<body>
<div class="layout">
    <!--挂号详情-->
    <br><br>
    <div class="row">
        <div class="col-sm-6 col-md-12">
            <div class="thumbnail">
                <img src="pic/doctor.jpg" alt="...">
                <div class="caption" id="doctor">
<!--                    <h3>新恒结衣</h3>-->
<!--                    <p>余号：45</p>-->
<!--                    <p>医师</p>-->
<!--                    <p>擅长妇科常见疾病,多发疾病的诊治</p>-->
                </div>
            </div>
        </div>
    </div>

<!--挂号详情-->
    <div class="row">
        <div class="col-sm-6 col-md-12">
            <div class="thumbnail">
                <div class="caption">
                    <ul class="nav nav-pills nav-stacked">
                        <li role="presentation" class="active"><a href="" data-toggle='modal' aria-pressed='false' data-target='#exampleModalCenter3' class="today"> 挂号 &nbsp -￥3.00</a></li>

                    </ul>
                    <!--<h3><a href="">上午  &nbsp -已无号</a></h3>-->
                    <!--<h3><a href="">下午  &nbsp -￥3.00</a></h3>-->
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //创建弹出层
    establish()
    function establish(){
        $("div[class='row']").before(
            "<div class='modal fade' id='exampleModalCenter5' tabindex='-1' role='dialog' aria-hidden='true'>"+
            "<div class='modal-dialog modal-dialog-centered' role='document'>"+
            "<div class='modal-content'>"+
            "<div class='modal-header text-center'>"+
            "<label class='mb-2'>四川和平医院</label>"+
            "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>"+
            "<span aria-hidden='true'>&times;</span>"+
            "</button></div><div class='modal-body'>"+
            "<div class='login px-4 mx-auto mw-100'>"+
            "<div class='form-group'>"+
            "<h4><label class='mb-2'>该时间段已无号，请选择其他时间段！</label></h4>"+
            "</div><button class='btn btn-primary btn-lg active' data-dismiss='modal' aria-label='Close' >确认</button>"+
            "</div></div></div></div></div>"
        )
        $("div[class='row']").before(
            "<div class='modal fade' id='exampleModalCenter3' tabindex='-1' role='dialog' aria-hidden='true'>"+
            "<div class='modal-dialog modal-dialog-centered' role='document'>"+
            "<div class='modal-content'>"+
            "<div class='modal-header text-center'>"+
            "<label class='mb-2'>四川和平医院</label>"+
            "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>"+
            "<span aria-hidden='true'>&times;</span>"+
            "</button></div><div class='modal-body'>"+
            "<div class='login px-4 mx-auto mw-100'>"+
            "<div class='form-group'>"+
            "<h4><label class='mb-2'>确定预约？</label></h4>"+
            "</div><a href='subscribe.html' class='btn btn-primary btn-lg active' role='button' id='bottom' onclick=''>确定</a> &nbsp " +
            "<a href=''role='button' class='btn btn-primary btn-lg active' class='close' data-dismiss='modal' aria-label='Close'>取消</button>"+
            "</div></div></div></div></div>"
        )
    }


    $.ajax({
        url: "/staffinfo/xiangqing",
        type: "get",
        dataType: "json",
        success: function (data) {

            for (var i in data) {
                $("#doctor").append("<h3 >" + data[i].staname + "</h3><p>余号：" + data[i].surplusnum + "</p><p>" + data[i].postitle + "</p><p>" + data[i].smiaoshu + "</p>")

                if(data[i].surplusnum <=0){
                    $(".today").attr("data-target","#exampleModalCenter5");
                }
            }


        }
    })

    // function gh01() {
    //
    // }
</script>
</body>
</html>